<template>
	<view style="overflow-x: hidden;">
		<view>
			<view id="top"
				style="background-repeat: no-repeat;background: #fff; background-size: cover; width: 750rpx;position: fixed;top: 0;z-index: 999;">

				<!-- 顶部栏 -->


				<view class="p20 f c3 " style="padding-top: 60rpx;">
					<image @click="chooseLocation"
						 :src="imgpath+'/static/images/position.png'" style="width: 40upx;"
						mode="widthFix"></image>
					<!-- <span>{{district}}</span> -->
					<span>{{myaddress? myaddress : ''  }}</span>

					<!-- <u--input
			        style="border: none;background: #fff;"
			        shape='circle'
				    placeholder="请输入相关信息"
				    prefixIcon="search"
				    prefixIconStyle="font-size: 22px;color: var(--theme)"
				></u--input> -->
				</view>
			</view>
		</view>


		<!-- 顶部栏 -->
		<!-- <view :style="'height: '+topHeight+'px;'" style="width: 100%;display: flex; position: relative;"></view> -->
		<view :style="'height: '+ 60 +'px;'" style="width: 100%;display: flex; position: relative;"></view>

		<view class="p20 pt0 padding-top-sm bf">
			<u-swiper :list="carouselListImg.length > 0 ? carouselListImg : carouselListImg2" @change="change"  indicator
  indicator-mode="dot" 
				@click="handleSwiperClick"></u-swiper>
		</view>
		
		<!-- <view class="page-section-spacing">
					<swiper class="swiper" 
						indicator-dots="true" 
						autoplay="true" 
						interval="5000" 
						duration="1500"	>
						<swiper-item v-for="(item,index) in lunbo" :key="index">
							<image :src="item.img" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				  </view> -->
				  
		 <view class="u-demo-block">
		 		
		 			<view class="u-demo-block__content">
		 				<u-notice-bar bgColor="#ffffff" color="#000000" 
		 				    :text="noticeListText"
		 					direction="column"
		 					@click="noticeLink"
		 				></u-notice-bar>
		 			</view>
		 </view>


		
				 
		<!-- 数据统计栏 开始-->
		<!-- <view class="section-title">数据统计</view> -->
		<view class="stat-cards f-w m20 b-rd b-s">
			<view class="stat-card b-rd b-s f-f-c-c" v-for="(item,ix) in staData.wasteCount" :key="ix">
				<view class="stat-num">{{item.val}}</view>
				<view class="stat-label">{{item.txt}}</view>
			</view>
		</view>
		<!-- 数据统计栏 结束-->
		<!-- 分类回收数据 开始-->
		<!-- <view class="section-title">分类回收数据</view> -->
		<view class="category-cards f-w m20 b-rd b-s">
			<view class="category-card b-rd b-s f-f-c-c" v-for="(item,ix) in staData.chartTypeList" :key="ix">
				<view class="category-num">{{item.value}}</view>
				<view class="category-label">{{item.name}}</view>
			</view>
		</view>
		<!-- 分类回收数据 结束-->
		<!-- <view class="p20 m20 b-rd b-s " style="display: flex;flex-wrap: wrap;">
			<view class="f-f-c-c" style="width: 25%;" v-for="(item,ix) in typeList" :key="ix"
				@click="swTourl('/pages/cart/cart',ix)">
				<image :src="item.imgUrl ?item.imgUrl :'https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/r1.png'"
					style="width: 148rpx;" mode="widthFix"></image>
				<span class="c9 f28">{{item.name}}</span>
			</view>
	
		</view> -->
		
		<view class="order-class">
					 <view class="order-class-item" @click="swTourl('/pages/cart/cart',0)">
						 <image :src="imgpath+'/static/images/index1.png'" mode="aspectFill"></image>
					 </view>
					 <view class="order-class-item" @click="swTourl('/pages/cart/cart',1)" style="margin-left: 8upx;" >
					 	 <image  :src="imgpath+'/static/images/index2.png'" mode="aspectFill"></image>
					 </view>
				 </view>  
				 <view class="order-class">
					 <view class="order-class-item"  @click="swTourl('/pages/cart/cart',2)">
						 <image  :src="imgpath+'/static/images/index3.png'" mode="aspectFill"></image>
					 </view>
					 <view class="order-class-item" @click="swTourl('/pages/cart/cart',3)" style="margin-left: 8upx;"  >
					 	 <image  :src="imgpath+'/static/images/index4.png'" mode="aspectFill"></image>
					 </view>
				 </view> 
					<view class="phone-info" v-if="kefulist.length > 0">
					  <view class="phone-item" style="margin-left: 30upx;" >全国服务热线</view>
					  <view class="phone-item" style="margin-right: 30upx;display: flex;color: #31b977;" @click="openPhone(kefulist[0])">
						<uni-icons type="phone-filled" color="#31b977" size="16"></uni-icons>
						<view>{{ kefulist[0] }}</view>
					  </view>
					</view>
					<view class="phone-info" v-if="kefulist.length > 1">
					  <view class="phone-item" style="margin-left: 30upx;" >本地服务热线</view>
					  <view class="phone-item" style="margin-right: 30upx;display: flex;color: #31b977;" @click="openPhone(kefulist[1])">
						<uni-icons type="phone-filled" color="#31b977" size="16"></uni-icons>
						<view>{{ kefulist[1] }}</view>
					  </view>
					</view>
				<!-- <view class="room">
					 <view class="room-address">门店地址</view>
					 <view style="color:#31b977;font-size: 28upx;" @click="openMap('阜阳市颍州区长安路碧桂园.翡翠湾')"><uni-icons type="location-filled" color="#31b977" size="18"></uni-icons>安徽省阜阳市颍州区长安路(碧桂园.翡翠湾-41栋114)</view>
				</view> -->
				<!-- <view class="other">
					 <view class="other-title">
						 其他功能
					 </view>
					 <view class="other-content">
						<view class="other-content-item"  @click="gotoPage('me/myAddress')">
							 <image src="/static/images/qt2.png"></image>
							 <view>线下门店</view>
						 </view>
						 <view class="other-content-item" @click="openAction()">
							 <image src="/static/images/qt1.png"></image>
							 <view>活动中心</view>
						 </view>
						 <view class="other-content-item" @click="changePage()">
							 <image src="/static/images/qt3.png"></image>
							 <view>变废为宝</view>
						 </view>
						 <view class="other-content-item" @click="gotoPage('order/address')">
							 <image src="/static/images/qt4.png"></image>
							 <view>地址管理</view>
						 </view>
					 </view>
				 </view> -->
			<!-- 	 <view class="cu-reclaimss" @click="addOrder(1)">
					<view class="cu-reclaims">
					     <view class="cu-reclaim" >
					         <image src="/static/images/xunhuan.svg" style="width:60upx;height:60upx;margin:50upx 80upx 4upx;"></image>
					         <view style="color: #FFFFFF;text-align: center;font-size: 36upx;" > 一键预约</view>
					     </view>
					 </view>
				 </view> -->
				 
		<view class="p20 b-s m20  bf b-rd" style="padding: 40upx 20upx;">
			<view class="f-s-b">
				<span class="tips1">1</span>
				<span class="c6 f28">预约下单</span>
				<image src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/dd1.png" style="height: 20upx;"
					mode="heightFix"></image>
				<span class="tips2">2</span>
				<span class="c6 f28">免费上门</span>
				<image src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/dd2.png" style="height: 20upx;"
					mode="heightFix"></image>
				<span class="tips3">3</span>
				<span class="c6 f28">完成结算</span>
			</view>
			<view class="f-c tips4 ma mt20" @click="swTourl('/pages/cart/cart',0)">
				<image class="mr10" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/hs.png"
					style="width: 48rpx;" mode="widthFix"></image>
				<span>预约回收</span>
			</view>
		</view>
		<view class="m20 c3 fb">附件回收网点</view>
		<view class="m20" style="position: relative;">
			<!-- <view style="position: absolute;left: 10rpx;bottom: 10rpx;z-index: 1;">
				<u-icon @click="backMyLocation" name="map" color="var(--theme)" size="28"></u-icon>
			</view> -->
		<!-- 	<map style="width: 100%; height: 300px;" id='map' :latitude="latitude" :scale='scale' :longitude="longitude"
				show-location show-compass :markers="covers" :circles='circlesobj' :borderWidth='0'
				@markertap='markertap'>

			</map> -->
		</view>
		<!-- <view class="pl20" @click="backMyLocation">
		回到原点
	</view> -->
		<view class="m20">
			<!-- <image class="mr10" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/map.png" style="width: 100%;height:580rpx; relative;z-index:8;" ></image> -->
			<view class="p20 b-rd bf b-s" style=" position: relative;z-index:9;">
				<view class="b-b pt20 pb20" v-for="(it,index) in siteList" :key="index"
					@click="navTo('/pages/index/site?data=' + JSON.stringify(it))">
					<view class="f-s-b c3">
						<span>{{it.name}}</span>
						<span class=" f-c cp">
							<span>{{it.distanceStr}}</span>
							<u-icon name="arrow-right" color="var(--theme)" size="14"></u-icon>
						</span>
					</view>
					<view class="f-s-b mb10 mt10 c6 f28">
						<span>{{it.province}}{{it.city}}{{it.county}}{{it.address}}</span>
						<span>{{it.arrivedTime}}</span>
					</view>
				</view>
				<view class="p20 f-c f28 c9 " @click="addMORE">
					{{ismore ? "加载更多" : '到底了'}}

				</view>
			</view>

		</view>
		
		<custom-tabbar :activeIndex="0" />
	</view>
</template>

<script>
	
	import customTabbar  from '@/components/customTabbar.vue'

	var QQMapWX = require('@/util/qqmap-wx-jssdk.min.js');
	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
		key: 'PEPBZ-AJLWN-22UFZ-SRXL4-QSFXF-ZOF2G' // 必填
	});
 import * as config from '@/config/index.js'
	export default {
		onShareAppMessage() {
		  return {
		    title: '清能科技回收',
		    path: '/pages/index/index',
		    imageUrl: '/static/huishou/logo.png'
		  }
		},
		onShareTimeline() {
		  return {
		    title: '清能科技回收',
		    query: '', // 可选参数
		       imageUrl: '/static/huishou/logo.png'
		  }
		},
		components: {
				customTabbar
		},

			
		data() {
			return {
				configList:{},
				kefulist:[],
				imgpath:config.def().imgpath,
				noticeListText: [
					'暂时无'
				],
				noticeList: [
				],
				carouselListImg: [],
				carouselListImg2: ['https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/banner.png'],
				carouselListImgdemo: [
					{
					img:"https://h5.qingnengkeji.cn/static/images/liu1.png"
					},
				],
				mapContext: null,
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				windowSpuList: [],
				cheapRecommend: [], //特价接口
				categoryPickList: [],
				categoryButtomList: [],
				salesTop: [],
				newTop: [],
				banner: undefined,
				isVip: false,
				district: '定位中...',
				myaddress: '定位中...',
				navbarTop: 26,
				navHeight: 32,
				navBottom: 58,
				MT: 38,
				MT2: 20,
				statusHeight: 20,
				pageNo: 1,
				storage: true,
				topHeight: 156,
				appear: true,
				loaded: false, //是否已加载过
				total: 10, //推荐商品总数
				t5: {},
				ismask: false,
				newTimesContent: '',
				indexBanner: {
					imgUrl: ''
				},
				template: null,
				
				siteNum: 5,
				zhandian: [{
						name: '科创智慧小镇站',
						t1: '安徽省滁州市南谯区',
						long: '0.5Km',
						time: 3
					},
					{
						name: '君临国际站',
						t1: '安徽省滁州市琅琊区',
						long: '1.5Km',
						time: 10
					},
					{
						name: '上庄回收站',
						t1: '安徽省滁州市琅琊区',
						long: '0.5Km',
						time: 3
					},
					{
						name: '四季花海',
						t1: '四季花海',
						long: '2.8Km',
						time: 20
					},
					{
						name: '大蜀山区',
						t1: '大蜀山站',
						long: '1.1Km',
						time: 8
					},
				],
				typeList: [],
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 31.820567,
				longitude: 117.227267,
				covers: [{
					id: 1,
					width: 30,
					height: 30,
					latitude: 31.821567,
					longitude: 117.227267,
					iconPath: 'https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/pos2.png',

					label: {
						content: '站点1'
					}
				}, ],
				circlesobj: [{
					latitude: 31.820567,
					longitude: 117.227267,
					radius: 500,
					color: '#FFFFFF',
					fillColor: '#CCCCCC9F'
				}],
				scale: 16,
				siteList: [], //站点列表
				pageNum: 1,
				ismore: true,
				isinit: false,
				staData: {
					"wasteCount": [{
							txt: '绿色回收网点',
							val: '0'
						},
						{
							txt: '绿色分拣中心',
							val: '0'
						},
						{
							txt: '回收总量',
							val: '0'
						},
						{
							txt: '碳排放量',
							val: '0'
						},
						{
							txt: '中转场',
							val: '0'
						},
						{
							txt: '回收种类',
							val: '0'
						},
						{
							txt: '回收员数量',
							val: '0'
						},
						{
							txt: '用户数量',
							val: '0'
						}
					],
					"chartTypeList": []
				}
			};
		},
		computed: {

			moduleList() {
				return this.template?.moduleList
			}
		},

		onShow() {
			this.getType()
			//#ifdef APP
			if (this.isinit) {
				this.pageNum = 1
				this.getsite()
			}
			//#endif
			//#ifdef H5
			this.pageNum = 1
			this.getsite(31.820567, 117.227267)
			//#endif

			setTimeout(() => {
				this.getLocal()
			}, 1000)

		},
		async onLoad(options) {
			
			this.loadData()
			//#ifdef H5
			//H5进入，有可能是回调进来的
			if (options.code && options.state) {
				const that = this
				that.logining = true
				that.$api.request('get', 'h5Login', {
					loginType: 3,
					raw: options.code
				}, failres => {
					that.logining = false
					that.$api.msg(failres.msg)
				}).then(res => {
					//登录成功，重定向到指定目标
					that.logining = false
					that.$store.commit('login', res.data)
					uni.setStorageSync('userInfo', res.data)
					//重定向到
					//不能重定向到tabbar页面
					if (options.state === '/pages/cart/cart' || options.state === '/pages/user/user' ||
						options.state === '/pages/index/index' || options.state === '/pages/category/category'
					) {
						uni.switchTab({
							url: options.state
						})
					} else {
						uni.redirectTo({
							url: options.state
						})
					}

				})
			}
			//#endif
			this.$api.request('get', 'carousel/app/getCarouselActive', {
				adType: 6
			}).then(res => {

				this.indexBanner = res.data[0]
			})
			let addresses = uni.getStorageSync('addresses');
			let res1 = {};
			if (addresses) {
				this.district = addresses.addressesName;
				res1.longitude = addresses.lng
				res1.latitude = addresses.lat
				res1.errMsg = 'getLocation:ok'
			} else {

				//#ifdef H5
				console.log('H5定位222222222222')
				res1.errMsg = 'getLocation:ok'
				res1.longitude = '117.186698'
				res1.latitude = '31.819383'
				//#endif
				// #ifdef MP-WEIXIN
				console.log('微信定位11111111111111')
				var [err, result] = await uni.getLocation({
					type: 'wgs84'
				})
				res1 = result
				console.log(res1, '微信定位33333333333333333')

				//#endif
			}
			// ================
			// var res1={}
			// res1.errMsg ='getLocation:ok'
			// res1.longitude ='11.22'
			// res1.latitude ='11.22'
			// ================
			console.log(res1.errMsg, 'res1.errMsgres1.errMsgres1.errMsgres1.errMsgres1.errMsg')
			if (res1.errMsg === 'getLocation:ok') {
				uni.showLoading({
					title: "加载中..."
				})
				this.$api.request('get', 'storage/position/getRecentlyStorage', {
					lng: res1.longitude,
					lat: res1.latitude
				}, failres => {
					uni.hideLoading()
					this.logining = false
					this.loaded = true
					this.$api.msg(failres.msg)
					this.storage = false
				}).then(res => {
					console.log(res, 'rresresresresresresresres')
					uni.hideLoading()
					this.loaded = true
					// 设置距离值
					let addresses = uni.getStorageSync('addresses');
					if (!addresses) {
						let addressesInfo = {};
						addressesInfo.lng = res1.longitude;
						addressesInfo.lat = res1.latitude;
						addressesInfo.distance = res.data.distance;
						uni.setStorageSync('addresses', addressesInfo);
					} else {
						addresses.distance = res.data.distance;
						uni.setStorageSync('addresses', addresses);
					}
					this.$store.commit('setStorage', res.data.id)
					this.$store.commit('setStorageObj', {
						businessStartTime: res.data.businessStartTime,
						businessState: res.data.businessState,
						businessStopTime: res.data.businessStopTime,
						deliveryStartTime: res.data.deliveryStartTime,
						deliveryStopTime: res.data.deliveryStopTime,
						haveStorage: res.data.haveStorage,
						id: res.data.id
					})
					if (!res.data.id) {
						this.storage = false
					}
				})
			}
			if (!addresses || !addresses.addressesName) {
				var address = await this.$getLocation(false, res1.latitude, res1.longitude)

				// tzx注释
				// if (address.streetNumber.street.length > 0) {
				//   this.district = address.streetNumber.street
				// } else {
				//   this.district = address.township
				// }
				// if (address.pois.length > 0 && address.pois[0].name.length < 8) {
				//   this.district = address.pois[0].name
				//   let addresses = uni.getStorageSync('addresses');
				//   if (addresses) {
				//     addresses.addressesName = address.pois[0].name;
				//     uni.setStorageSync('addresses', addresses);
				//   }
				// }
			}
			// tzx注释

			// console.log(JSON.stringify(address))
		},
		onPageScroll(e) {
			e.scrollTop >= 100 ? this.appear = false : this.appear = true
		},
		onReachBottom() {},
		onReady() {
			this.mapContext = uni.createMapContext("map", this); // 得到map对象
			const res = uni.getSystemInfoSync();
			// console.log(res.statusBarHeight);
			this.statusHeight = res.statusBarHeight

			// #ifdef MP-WEIXIN
			console.log('状态栏高度')
			console.log(this.statusHeight + 'px')
			this.navbarTop = wx.getMenuButtonBoundingClientRect().top
			this.navHeight = wx.getMenuButtonBoundingClientRect().height
			console.log('标题栏高度')
			console.log(this.navHeight + 'px')
			this.navBottom = wx.getMenuButtonBoundingClientRect().bottom
			console.log('底部坐标')
			console.log(this.navBottom + 'px')
			this.MT = this.navBottom

			console.log('定位栏外边框高度')
			console.log(this.MT + 'px')
			// #endif
			// #ifdef APP-PLUS
			this.navbarTop = this.statusHeight
			this.navHeight = 44
			this.navBottom = this.navHeight + 20
			this.MT = this.navBottom
			// #endif
			// #ifdef H5
			this.navbarTop = 5;
			// #endif

		},
		methods: {
			beforeSwitch(index) {
				if(index == 2)
				{
				
					return false;
				}
				else 
				{
					return true;
				}
			},
			noticeLink(index) {
				console.log(index)
				console.log(this.noticeList)
				const item = this.noticeList[index];
				console.log(item)
				uni.navigateTo({ url: item.url }); // 跳转详情
			},
			markertap(e) {
				console.log(e, 'eee')
			},
			change(){},
			click(index) {
				console.log("点击了banner",index);
			},	
		    handleSwiperClick(index) {
				const item = this.carouselList[index];
				console.log(item)
				uni.navigateTo({ url: item.url }); // 跳转详情页
			},
			getType() {
				this.$api.request('get', 'categorize/app/allList').then(res => {
					// console.log(res.data)
					this.typeList = res.data
				})
			},
			getsite() {
				let that = this
				let lat = that.latitude
				let lon = that.longitude
				this.$api.request('get', 'site/app/allList', {
					// latitude: 31.820567,
					// longitude: 117.227267,
					pageNum: that.pageNum,
					pageSize: 10,
					latitude: lat,
					longitude: lon,
				}, ).then(res => {
					if (!this.ismore) {
						return
					}
					if (that.pageNum == 1) {
						this.siteList = [...res.rows]
					} else {
						this.siteList = [...this.siteList, ...res.rows]
					}
					if (res.rows.length < 10) {
						this.ismore = false
					} else {
						this.ismore = true
					}
					let arr = JSON.parse(JSON.stringify(this.siteList))
					this.covers = []
					this.covers = arr.map((item, index) => {
						// console.log(item.id,'item.id')
						return {
							id: Number(item.id),
							width: 30,
							height: 30,
							latitude: item.latitude,
							longitude: item.longitude,
							iconPath: 'https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/pos2.png',
							label: {
								content: item.name
							}
						}
					})
					this.circlesobj = [{
						latitude: lat,
						longitude: lon,
						radius: 500,
						color: '#FFFFFF',
						fillColor: '#CCCCCC9F'
					}]



				})
			},
			generateRandomNumber() {
				const min = 1000;
				const max = 999;
				// 生成 min 到 max 之间的随机整数
				// Math.random() 函数返回一个大于等于 0 且小于 1 的随机浮点数。通过将其乘以 (max - min + 1)，我们得到一个大于等于 0 且小于等于 (max - min + 1) 的随机浮点数。	
				// 接着，我们将结果舍去小数部分，即使用 Math.floor() 方法对结果进行向下取整。
				// 最后，我们加上 min，这样就将取整后的结果偏移为在 min 到 max 之间的随机整数。
				const randomNumber = Math.floor(Math.random() * (max - min + 1) + min);
				return randomNumber;
			},
			backMyLocation() {
				// this.mapContext.moveToLocation();
				const mapCtx = uni.createMapContext("map", this);
				console.log(this.latitude, this.longitude, 'latlon222')
				mapCtx.moveToLocation({
					latitude: this.latitude,

					longitude: this.longitude,
					success: () => {
						console.log('原点1')
						const timer = setTimeout(() => {
							console.log('原点2')
							// this.longitude = 31.820567,
							// this.latitude = 117.227267,
							clearTimeout(timer);
							//进行缩放，设置为16
							this.scale = 16;
						}, 300);
					}
				})

			},

			async getLocal() {

				// uni.showToast({
				// 	title: "获取位置中。。",
				// 	icon: "none"
				// });
				// console.log('APP定位44444444')			
				let _that = this //在uniapp中药定义一下this才能使用
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log(res, '当前位置信息')
						// var address = _that.$getLocation(false, res.latitude, res.longitude)
						// console.log(address,'addressaddress')
						// 微信小程序中没有位置地址只有经纬度
						_that.myaddress = res.address?.city + res.address?.district + res.address?.street
						_that.latitude = res.latitude
						_that.longitude = res.longitude
						let addresses = uni.getStorageSync('addresses');
						addresses.lng = res.longitude;
						addresses.lat = res.latitude;
						uni.setStorageSync('addresses', addresses);
						_that.isinit = true
						_that.getsite()
						// #ifdef  MP-WEIXIN
						// 逆解析获取位置
						_that.getreverseGeocoder(res)
						// #endif


					},
					fail: function(res) {
						uni.showToast({
							title: "获取位置信息失败",
							icon: "none"
						});
					},
				});

			},
			getreverseGeocoder(data) {
				let _that = this //在uniapp中药定义一下this才能使用
				//逆地址解析  坐标转地址信息
				qqmapsdk.reverseGeocoder({
					//Object格式
					location: {
						latitude: data.latitude,
						longitude: data.longitude
					},
					success: function(res) { //成功后的回调
						const mapdata = res.result.ad_info;
						_that.myaddress = mapdata?.city + mapdata?.district
						console.log(mapdata, 'mapdatamapdata')
					},
					fail: function(error) {
						console.error(error);
					},
					complete: function(res) {
						//console.log(res);
					}
				});
			},
			localname(longitude, latitude) {
				console.log('转换地址')
				this.$api.request('get', 'storage/position/getRecentlyStorage', {
					lng: longitude,
					lat: latitude
				}).then(res => {
					console.log(res.data)
				})
			},
		
		
			addMORE() {
				if (this.ismore) {
					this.pageNum++
					this.getsite()
				}
			},
			swTourl(url, val) {
				uni.setStorageSync('currentType', val);
				uni.switchTab({
					url: url
				});

			},
			async loadData() {
				const that = this
				uni.showLoading({
					title: "加载中..."
				})
				that.$api.request('get', 'storage/position/getIndexDataByStorage', {
					storageId: 0
				}, failres => {
					that.$api.msg(failres.msg)
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					
					
					that.configList   =data.configList
					uni.setStorageSync('configList', that.configList);
					
					that.configList.forEach(item => {
					  if (item.configKey === 'kefuimg') {
						uni.setStorageSync('kefuimg',item);
					  } else if (item.configName === 'kefu_phone') {
					    that.kefulist.push(String(item.configValue));
					  }
					});
					console.log("that.kefulist",that.kefulist)
				
					 
					//轮播
					data.carouseList.t1.forEach(item => {
						if (!item.color) {
							item.color = 'rgb(205, 215, 218)'
						}
					})
					
					that.carouselList = data.carouseList.t1
					console.log("carouseList",that.carouselList)
					that.carouselListImg = that.carouselList.map((item) => {
						return JSON.parse(item.imgUrl)[0].url
					})
					console.log(that.carouselListImg, ' that.carouselListImg')
					that.swiperLength = data.carouseList.t1.length
					that.titleNViewBackground = data.carouseList.t1[0].color
					if (data.cheapRecommend) {
						that.cheapRecommend = data.cheapRecommend
					}
					
					
					//通知
					if(data.platformNotices){
						that.noticeList = data.platformNotices
						// that.carouselListText = that.noticeList.map((item) => {
						// 	return JSON.parse(item.imgUrl)[0].noticeTitle
						// })
						that.noticeListText = that.noticeList.map((item) => {
							return item.noticeTitle
						})
						console.log(that.noticeListText)
						
					}
					
					that.getStaData()
					uni.hideLoading()
				})
			},
			async getStaData() {
				this.$api.request('post', 'app/sta/card', {}, failers => {
					this.$api.msg(failers.msg)
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					this.staData.chartTypeList = data.chartTypeList

					// 绿色回收网点0、绿色分拣中心1，回收总量2、碳排放量3、
					// 中转场4，在增加回收种类5、回收员数量6、用户数量7
					this.staData.wasteCount[0].val = data.wasteCount.greenWeb ? data.wasteCount.greenWeb : 0 +
						'个'
					this.staData.wasteCount[1].val = data.wasteCount.greenCore ? data.wasteCount.greenCore :
						0 + '个'
					this.staData.wasteCount[2].val = data.wasteCount.wasteTotal ? data.wasteCount.wasteTotal :
						0 + '吨'
					this.staData.wasteCount[3].val = data.wasteCount.carbonEmissionTotal ? data.wasteCount
						.carbonEmissionTotal :
						0 + '吨'
					this.staData.wasteCount[4].val = data.wasteCount.transferPlant ? data.wasteCount
						.transferPlant : 0 + '个'
					this.staData.wasteCount[5].val = data.wasteCount.recoveryTypeNum ? data.wasteCount
						.recoveryTypeNum : 0 + '种'
					this.staData.wasteCount[6].val = data.wasteCount.recoveryPersonNum ? data.wasteCount
						.recoveryPersonNum : 0 +
						'个'
					this.staData.wasteCount[7].val = data.wasteCount.userCount ? data.wasteCount.userCount :
						0 + '个'
					console.log(this.staData)
				})
			},
			nomask() {
				this.ismask = false
			},

			//选择地址
			chooseLocation() {
				// this.getLocal()
				return
				let that = this
				uni.chooseLocation({
					success: (res1) => {
						console.log(res1)
						if (res1.name === "") {
							return
						}

						that.district = res1.name
						uni.showLoading({
							title: "加载中..."
						})
						let addressesInfo = {};
						addressesInfo.lng = res1.longitude;
						addressesInfo.lat = res1.latitude;
						addressesInfo.addressesName = res1.name;

						this.$api.request('get', 'storage/position/getRecentlyStorage', {
							lng: res1.longitude,
							lat: res1.latitude
						}, failres => {
							uni.setStorageSync('addresses', addressesInfo);
							uni.hideLoading()
						}).then(res => {
							uni.hideLoading()
							addressesInfo.distance = res.data.distance;
							uni.setStorageSync('addresses', addressesInfo);
							console.log(res)
							this.$store.commit('setStorage', res.data.id)
							this.newTop = []
							this.cheapRecommend = []
							this.salesTop = []
							// this.loadData(res.data.id)
							if (!res.data.id) {
								this.storage = false
							} else {
								this.storage = true
								// this.loadRecommand('refresh')
							}
						})
					}
				});
			},
		},
		// #ifndef MP
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			uni.navigateTo({
				url: '/pagesA/product/search'
			})
		},
		//点击导航栏 buttons 时触发
		// onNavigationBarButtonTap(e) {
		// 	const index = e.index;
		// 	if (index === 0) {
		// 		this.$api.msg('点击了扫描');
		// 	} else if (index === 1) {
		// 		// #ifdef APP-PLUS
		// 		const pages = getCurrentPages();
		// 		const page = pages[pages.length - 1];
		// 		const currentWebview = page.$getAppWebview();
		// 		currentWebview.hideTitleNViewButtonRedDot({
		// 			index
		// 		});
		// 		// #endif
		// 		uni.navigateTo({
		// 			url: '/pages/notice/notice'
		// 		})
		// 	}
		// }
		// #endif
	}
</script>

<style lang="scss">
	page {
		
		background: #FAFAFB;
		
		
	}

	.m-t {
		margin-top: 16upx;
	}

	.Bigmask {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .3);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		transition: all .5s,
	}

	.maskBox {
		width: 77%;
		height: 52%;
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 1001;
		transform: translateX(-50%) translateY(-50%) scale(1, 1);
		transition: all .5s ease;

		.maskClose {
			position: absolute;
			right: 15px;
			top: 15px;
			width: 26px;
			height: 26px;
		}

		.mask {
			width: 100%;
			height: 100%;
		}
	}

	.op {
		opacity: 0;
		visibility: hidden;
	}

	.opAc {
		visibility: visible;
		opacity: 1;
	}

	.sc {
		opacity: 0;
		transform: translateX(-50%) translateY(-50%) scale(0, 0);
		transition: all .5s ease;
	}

	.scAc {
		opacity: 1;
		transform: translateX(-50%) translateY(-50%) scale(1, 1);
		transition: all .5s ease;
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: .4s;
		}
	}

	.carousel {
		width: 100%;
		height: 280upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			// padding: 0 11upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 12upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	.ad-1 {
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;

		image {
			width: 100%;
			height: 100%;
		}
	}

	/* 秒杀专区 */
	.seckill-section {
		padding: 4upx 30upx 24upx;
		background: #fff;

		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;

			.s-img {
				width: 140upx;
				height: 30upx;
			}

			.tip {
				font-size: $font-base;
				color: $font-color-light;
				margin: 0 20upx 0 40upx;
			}

			.timer {
				display: inline-block;
				width: 40upx;
				height: 36upx;
				text-align: center;
				line-height: 36upx;
				margin-right: 14upx;
				font-size: $font-sm+2upx;
				color: #fff;
				border-radius: 2px;
				background: rgba(0, 0, 0, .8);
			}

			.icon-you {
				font-size: $font-lg;
				color: $font-color-light;
				flex: 1;
				text-align: right;
			}
		}

		.floor-list {
			white-space: nowrap;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			width: 150upx;
			margin-right: 20upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;

			image {
				width: 150upx;
				height: 150upx;
				border-radius: 6upx;
			}

			.price {
				color: $uni-color-primary;
			}
		}
	}

	.f-header {
		display: flex;
		align-items: center;
		height: 100upx;
		padding: 6upx 30upx 8upx;
		background: #fff;

		image {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			margin-right: 20upx;
		}

		.tit-box {
			flex: 1;
			display: flex;
		}

		.tit {
			font-size: $font-lg +2upx;
			color: #font-color-dark;
			line-height: 1.3;
		}

		.tit2 {
			font-size: $font-sm;
			color: $font-color-light;
		}

		.icon-you {
			font-size: $font-lg +2upx;
			color: $font-color-light;
		}
	}

	/* 团购楼层 */
	.group-section {
		background: #fff;

		.g-swiper {
			height: 550upx;
			padding-bottom: 30upx;
		}

		.g-swiper-item {
			width: 100%;
			padding: 0 30upx;
			display: flex;
		}

		image {
			width: 100%;
			height: 360upx;
			border-radius: 4px;
		}

		.g-item {
			display: flex;
			flex-direction: column;
			overflow: hidden;
			width: 200rpx;
		}

		.left {
			flex: 1.2;
			margin-right: 24upx;

			.t-box {
				padding-top: 20upx;
			}
		}

		.right {
			flex: 0.8;
			flex-direction: column-reverse;

			.t-box {
				padding-bottom: 20upx;
			}
		}

		.t-box {
			height: 160upx;
			font-size: $font-base+2upx;
			color: $font-color-dark;
			line-height: 1.6;
		}

		.price {
			color: $uni-color-primary;
		}

		.m-price {
			font-size: $font-sm+2upx;
			text-decoration: line-through;
			color: $font-color-light;
			margin-left: 8upx;
		}

		.pro-box {
			display: flex;
			align-items: center;
			margin-top: 10upx;
			font-size: $font-sm;
			color: $font-base;
			padding-right: 10upx;
		}

		.progress-box {
			flex: 1;
			border-radius: 10px;
			overflow: hidden;
			margin-right: 8upx;
		}
	}

	/* 分类推荐楼层 */
	.hot-floor {
		width: 100%;
		overflow: hidden;
		margin-bottom: 20upx;

		.floor-img-box {
			width: 100%;
			height: 320upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(rgba(255, 255, 255, .06) 30%, #f8f8f8);
			}
		}

		.floor-img {
			width: 100%;
			height: 100%;
		}

		.floor-list {
			white-space: nowrap;
			padding: 20upx;
			padding-right: 50upx;
			border-radius: 6upx;
			margin-top: -140upx;
			margin-left: 30upx;
			background: #fff;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
			position: relative;
			z-index: 1;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			width: 180upx;
			margin-right: 20upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;

			image {
				width: 180upx;
				height: 180upx;
				border-radius: 6upx;
			}

			.price {
				color: $uni-color-primary;
			}
		}

		.more {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;
			width: 180upx;
			height: 180upx;
			border-radius: 6upx;
			background: #f3f3f3;
			font-size: $font-base;
			color: $font-color-light;

			text:first-child {
				margin-bottom: 4upx;
			}
		}
	}

	/* 猜你喜欢 */
	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		background: #fff;

		.guess-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;

			&:nth-child(2n+1) {
				margin-right: 4%;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}

		.price {
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}
	}

	.bg-gradual-green {
		background-image: linear-gradient(180deg, var(--theme), var(--theme));
		color: #ffffff;
	}

	.tips1,
	.tips2,
	.tips3 {
		width: 36rpx;
		height: 36rpx;
		background: linear-gradient(180deg, #FAAE60 0%, #FD661F 100%);
		box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 50%;
		text-align: center;
		line-height: 36rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.tips2 {
		background: linear-gradient(180deg, #FDE978 0%, #FFD84C 100%);

	}

	.tips3 {
		background: linear-gradient(180deg, #FDE978 0%, #FFD84C 100%);
	}

	.tips4 {
		width: 340rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #31EB8D 0%, #4CC097 100%);
		box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.stat-cards {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx 0;
		background: none;
	}
	.stat-card {
		width: 25%;
		background: #fff;
		margin-bottom: 10rpx;
		padding: 24rpx 0 18rpx 0;
		box-shadow: 0 2rpx 8rpx 0 rgba(26,195,136,0.08);
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		position: relative;
	}
	.stat-icon {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 8rpx;
		background: var(--themebg);
		border-radius: 50%;
	}
	.stat-num {
		font-size: 40rpx;
		font-weight: bold;
		color: var(--theme);
		margin-bottom: 4rpx;
	}
	.stat-label {
		font-size: 24rpx;
		color: #666;
	}
	// 可自定义不同icon背景色
	.stat-icon.icon-0 { background: linear-gradient(135deg, #31EB8D 0%, #4CC097 100%); }
	.stat-icon.icon-1 { background: linear-gradient(135deg, #FFD84C 0%, #FDE978 100%); }
	.stat-icon.icon-2 { background: linear-gradient(135deg, #FD661F 0%, #FAAE60 100%); }
	.stat-icon.icon-3 { background: linear-gradient(135deg, #A3D8F4 0%, #1AC388 100%); }
	.stat-icon.icon-4 { background: linear-gradient(135deg, #FDE978 0%, #FFD84C 100%); }
	.stat-icon.icon-5 { background: linear-gradient(135deg, #FD661F 0%, #FAAE60 100%); }
	.stat-icon.icon-6 { background: linear-gradient(135deg, #A3D8F4 0%, #1AC388 100%); }
	.stat-icon.icon-7 { background: linear-gradient(135deg, #31EB8D 0%, #4CC097 100%); }

	.category-cards {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx 0;
		background: none;
	}
	.category-card {
		width: 25%;
		background: #fff;
		margin-bottom: 10rpx;
		padding: 24rpx 0 18rpx 0;
		box-shadow: 0 2rpx 8rpx 0 rgba(26,195,136,0.08);
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		position: relative;
	}
	.category-num {
		font-size: 36rpx;
		font-weight: bold;
		color: var(--theme);
		margin-bottom: 4rpx;
	}
	.category-label {
		font-size: 24rpx;
		color: #666;
	}
	.section-title {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: var(--theme);
		margin: 32rpx 0 18rpx 0;
		letter-spacing: 2rpx;
		background: #f6fffa;
		border-radius: 12rpx;
		padding: 18rpx 0 14rpx 0;
		box-shadow: 0 2rpx 8rpx 0 rgba(26,195,136,0.04);
	}
</style>





<style>
	.content {
		height: auto;
	}
	.logo {
		height: 400upx;
		width: 100%;
		/* width: calc(100% - 60upx);
		margin: 30upx 30upx;
		margin-top: 20upx; */
	}
	.static{
		/* height: 200upx; */
		width: calc(100% - 60upx);
		margin:-70upx 30upx 0;
		background: white;
		-webkit-box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.1);
		box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.1);
		-webkit-border-radius: 20upx;
		border-radius: 20upx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.static-item{
		flex:1;
		text-align: center;
		background-color: rgb(255,255,255);
	}
	.static-item-type{
		padding-top: 20upx;
		font-size: 32upx;
		color: #222222;
	}
	.static-item-number{
		margin-top: 4upx;
		font-size: 40upx;
		color: #31b977;
		padding-bottom: 20upx;
	}
	.city{
		width: calc(100% - 60upx);
		margin: 30upx 30upx;	
		display: flex;
		align-items:center;
		justify-content:space-between;
	}
	.city-item{
		font-size: 30upx;
		color: #000000;
	}
    .page-section-spacing{
		width: calc(100% - 60upx);
		margin: 30upx 30upx;
	}
	.swiper{
		height: 300upx;
		width: 100%;
	}

	// swiper-item 里面的图片高度
	swiper-item image{
		width: 100%;
		height: 300upx;
		border-radius: 20upx 20upx 0 0;
	}
	
	.order-class{
		display: flex;
		width: calc(100% - 60upx);
		margin: 30upx 30upx;
	}
	.order-class-item{
		height: 200upx;
		width: calc(50% - 4upx);
	}
	
	.order-class-item image{
		width: 100%;
		height: 200upx;
		border-radius: 14upx;
	}
	.phone{
		width: calc(100% - 60upx);
		margin: 30upx 30upx;
		background-color: #F7F7F7;
		border-radius: 20upx 20upx 20upx 20upx;
		height: 140upx;
	}
	.phone-info{
		padding-top: 20upx;
		display: flex;
		align-items:center;
		justify-content:space-between;
	}
    .phone-item{
		font-size: 28upx;
		color: #222222;
	}
	.room{
		width: calc(100% - 60upx);
		margin: 30upx 30upx;
		display: flex;
		/* background-color: #EEEEEE;
		border-radius: 20upx 20upx 20upx 20upx; */
	}
	.room-address{
		color: #000000;
		font-size: 32upx;
		font-weight: 600;
		width: 170upx;
	}
	.room-info{
		display: flex;
		align-items:center;
		justify-content:space-between;
		color: #19BE6B;
		font-size: 30upx;
	}
	.room-info-item{
		flex:1;
		padding: 20upx;
	}
	.other{
        width: calc(100% - 60upx);
		margin: 30upx 30upx 60upx;
	}	
	.other-title{
		font-size: 32upx;
		color: #222222;
		font-weight: 600;
	}
	.other-content{
		margin-top: 60upx;
		display: flex;
		align-items:center;
		justify-content:center;
	}
	.other-content-item{
		flex: 1;
		text-align: center;
	}
	.other-content-item image{
		width: 120upx;
		height: 100upx;
	}
	
	.cu-reclaim {
	    height: 220upx;
	    width: 220upx;
	    border-radius: 110upx 110upx 110upx 110upx;
	    background-color: rgba(50,186,120,1);
		position: absolute;
		top: 20upx;
		left: 20upx;
	}
	
	.cu-reclaims {
	    background-color: rgba(50,186,120,0.5);
	    height: 260upx;
	    width: 260upx;
	    border-radius: 130upx 130upx 130upx 130upx;
		position: absolute;
		top: 50upx;
		left: 50upx;
	}
	
	.cu-reclaimss {
	    background-color: rgba(50,186,120,0.3);
	    height: 360upx;
	    width: 360upx;
		margin: 0 auto;
		border-radius: 180upx 180upx 180upx 180upx;
		position: relative;
	    animation: one-reclaim 0.6s infinite linear;
	    animation-direction: alternate;
	}
	
	@keyframes one-reclaim {
	    0% {
	        opacity: 0;
	        transform: scale(0.5);
	    }
	
	    100% {
	        opacity: 1;
	        transform: scale(1);
	    }
	}
	
	
</style>
